<template>
  <el-dialog
    v-model="visible"
    :title="dataForm.name"
    :close-on-click-modal="false"
  >
    <el-image ref="imgRef" :src="dataForm.src">
      <div slot="placeholder" class="image-slot">
        加载中<span class="dot">...</span>
      </div>
    </el-image>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
const visible = ref(false)
const dataForm = reactive({
  name: "展示",
  src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
})
const imgRef = ref(null)
const init = (row) => {
  visible.value = true
  dataForm.name = row.name
  dataForm.src = row.showUrl
}
defineExpose({init})
</script>

<style scoped>
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
